<!--
    详情组，代表每一行
-->
<template>
  <div class="detail-item-group" :style="paddingStyle">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
interface detailItemGroupProps {
  column: number
  labelWidth: string
  labelStyle?: Partial<CSSStyleDeclaration>,
  model: string
}
const props = withDefaults(defineProps<detailItemGroupProps>(), {
  labelWidth: '90px',
  column: 2,
  model: 'page'
})
let paddingStyle = ref({
  padding: '0 100px'
})
if (props.model === 'dialog') {
  paddingStyle.value = {
    padding: '0 10px'
  }
}

// 注入父组件的属性
provide('labelWidth', props.labelWidth)
provide('labelStyle', props.labelStyle)
</script>

<style lang="less" scoped>
.detail-layout {
  padding: 0 100px;
  background: #ffffff;
}
</style>
